<template>
  <div class="dev">
      <div  class="dev-img">
        <div class="img-bc">
          <div class="loading">
            <div class="left">
              <div class="left-progress" v-bind:style="{transform: 'rotateZ('+  getLAngle + 'deg)'}"></div>
            </div>
            <div class="right">
              <div class="right-progress"
                   v-bind:style="{transform: 'rotateZ('+  getRAngle + 'deg)' , transition: 'transform '+  +' ease-in 0.5s'}"
              ></div>
            </div>
            <div class="progress">
              <div class="percent-number">
                <img src="../../assets/img/home/flow.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    <div class="dev-msg">
      <div class="flow-percent"><span>剩余流量:</span> <router-link to="/store"><span style="color:#129cfd;">{{ percent }}%</span></router-link></div>
      <div class="flow used">本月使用流量: <router-link to="/orderList"><span>{{useFlows}}</span><span>G</span></router-link></div>
      <div class="flow residue">可用流量: <router-link to="/flowChart"><span>{{ownFlows}}</span><span>G</span></router-link></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['flowMsg'],
  data () {
    return {
      angle: 0,
      percent: 0
    }
  },
  computed: {
    getLAngle: function () {
      let angle = 180 - this.angle
      if (angle < 0) {
        return 0
      } else {
        return angle
      }
    },
    getRAngle: function () {
      let angle = this.angle - 180
      if (angle < 0) {
        return 180
      } else {
        return 180 - angle
      }
    },
    getTime: function () {
      if (this.angle > 180) {
        return 0.5 * (this.angle - 180) / 180
      } else {
        return 0
      }
    },
    useFlows: function () {
      return this.flowMsg.useFlows.toFixed(2) || 0.0
    },
    ownFlows: function () {
      let own = this.flowMsg.residualflow
      if (isNaN(own)) {
        return 0.0
      } else return parseFloat(own).toFixed(2)
    }
  },
  watch: {
    flowMsg: function () {
      let useFlow = this.flowMsg.useFlows
      let residualflow = this.flowMsg.residualflow
      let per = (residualflow / (residualflow + useFlow) * 100).toFixed(1)
      let angle = per * 360 / 100
      this.angle = angle
      if (per === 'NaN') {
        this.percent = 0.0
      } else {
        this.percent = per
      }
      // this.angle = 0
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/animate.min.css";
  .dev {
    padding-top: 0.5rem;
    margin-top: 0.06rem;
    height: 7.4rem;
    width: 7.5rem;
    position: relative;
    background-color: #f8f8f8;
  }

  .dev-msg {
    position: absolute;
    bottom: 0.6rem;
    width: 100%;
    font-size: 0.3rem;
    color: #716d6d;
    height: 1.5rem;
  }
  .flow-percent{
    width: 100%;
    text-align: center;
    font-size: 0.48rem;
    color: #00c0f8;
  }
  .flow-percent span{
    color: #999;
    line-height: 0.48rem;
    font-size: 0.36rem;
  }

  .used {
    display: inline-block;
    margin-left: 0.68rem
  }

  .residue {
    display: inline-block;
    margin-left: 1rem
  }

  .flow span:first-child {
    color: #129cfd;
    font-size: 0.38rem;
  }

  .flow span:last-child {
    color: #129cfd;
    font-size: 0.3rem;
  }
  .img-bc{
    width: 3.8rem;
    height: 3.8rem;
    margin: 0 auto;
    transition:opacity 0.6s;
    padding-top: 0.2rem;
    font-size: 0.24rem;
    position: relative;
    border-radius: 50%;
    background:   -webkit-linear-gradient(left,#f2f1f1, #ccccce);
    border: 0.04rem solid #fff;
    box-shadow: -0.4rem 0.5rem 1.2rem 0.1rem rgba(0,0,0,0.1);
  }
  .loading {
    font-size: 0.24rem;
    margin: 0.2rem auto;
    width: 3rem;
    height: 3rem;
    position: relative;
  }

  .loading .progress {
    position: absolute;
    width:0.8rem;
    height: 0.8rem;
    color: #2d3b42;
    background:   -webkit-linear-gradient(left,#ccccce, #fff);
    border-radius: 50%;
    left: 1.1rem;
    top: 1.1rem;
    line-height: 0.8rem;
    text-align: center;
  }
  .progress {
    transition: opacity 0.58s;
  }
  .percent-number{
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    background-color: #00c0f8;
    border-radius: 50%;
    left: 0.1rem;
    top: 0.1rem;
    line-height: 0.7rem;
    color: #fff;
    border: 0.04rem solid #fff;
  }
  .percent-number img{
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    left: 0.06rem;
    top: 0.06rem;
  }
  .left,
  .right {
    width: 1.5rem;
    height: 3rem;
    overflow: hidden;
    position: relative;
    float: left;
    /*background-color: #fff*/
  }

  .left {
    border-radius: 3rem 0 0 3rem;
  }

  .right {
    border-radius: 0 3rem 3rem 0;
  }

  .left-progress,
  .right-progress {
    content: "";
    position: absolute;
    display: block;
    width: 1.51rem;
    height: 3rem;
    border-radius: 3rem 0 0 3rem;
    background-color: #00c0f8;
  }

  .right-progress {
    content: "";
    position: absolute;
    display: block;
    border-radius: 0 3rem 3rem 0;
  }
  .left-progress {
    transform-origin: right center;
    transition: transform 0.4s linear ;
    border: 0.04rem solid #fff;
    border-right: none;
  }

  .right-progress {
    transform-origin: left center;
    transition: transform 0.5s linear 0.4s;
    border: 0.04rem solid #fff;
    border-left: none;
  }
</style>
